<template>
	<view class="wrapper shenQing">
		<u--form :model="model1" :rules="rules" ref="uForm">
			<div class="bfff">
				<div class="flex-start mb25">
					<image src="../../../static/shouye/shen1.png" class="shen1-icon mr10" mode="widthFix"></image>
					<div class="f32">预约信息</div>
				</div>
				<div class="center f28 mb20">
					<div class="c333">服务名称</div>
					<div class="flex1 c9b">城乡居民养老保险参保登记</div>
				</div>
				<div class="center f28 mb20">
					<div class="c333">办理地址</div>
					<div class="flex1 c9b">隆昌市古湖街道恒隆路三段79号<image src="../../../static/shouye/shen3.png" mode="widthFix"
							class="address-icon ml5 posr"></image>
					</div>

				</div>
				<div class="center f28 mb20">
					<div class="c333">联系电话</div>
					<div class="flex1 c9b">0832-3982259</div>
				</div>
				<u-form-item prop="date">
					<div class="center f28 mb20 w100">
						<div class="c333">预约日期</div>
						<div class="flex1 c9b input-box flex-start">
							<picker mode="date" @change="dateChange" class="w100">
								<div class="center w100">
									<view class="flex1 c333" v-if="date">{{date}}</view>
									<view class="flex1" v-else>请选择预约日期</view>
									<image src="../../../static/shouye/down.png" mode="widthFix" class="down-icon">
									</image>
								</div>
							</picker>
						</div>
					</div>
				</u-form-item>
				<u-form-item prop="time">
					<div class="center f28 w100 mb20">
						<div class="c333">预约时间</div>
						<div class="flex1 c9b input-box flex-start">
							<picker mode="time" @change="timeChange" class="w100">
								<div class="center w100">
									<view class="flex1 c333" v-if="time">{{time}}</view>
									<view class="flex1" v-else>请选择预约时间</view>
									<image src="../../../static/shouye/down.png" mode="widthFix" class="down-icon">
									</image>
								</div>
							</picker>
						</div>
					</div>
				</u-form-item>
				<div class="align-start f28 mb20">
					<div class="c333">办理简介</div>
					<div class="flex1 c9b">简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
				</div>
				<div class="f28 mb20">
					<div class="c333 mb10">预约备注</div>
					<textarea placeholder="请填写预约备注" placeholder-class="c9b" class="f28 w100"></textarea>
				</div>
			</div>
			<div class="bfff mt40">
				<div class="flex-start mb25">
					<image src="../../../static/shouye/shen2.png" class="shen2-icon mr10" mode="widthFix"></image>
					<div class="f32">个人信息</div>
				</div>
				<u-form-item prop="time">
					<div class="center f28 w100 mb20">
						<div class="c333">姓名</div>
						<input type="text" placeholder="请输入姓名" placeholder-class="c9b" class="flex1 input-box f28" />
					</div>
				</u-form-item>
				<u-form-item prop="time">
					<div class="center f28 w100 mb20">
						<div class="c333">证件类型</div>
						<div class="flex1 c9b input-box flex-start">
							<picker mode="selector" :range="range" @change="timeChange" class="w100">
								<div class="center w100">
									<view class="flex1 c333" v-if="time">{{time}}</view>
									<view class="flex1" v-else>请选择证件类型</view>
									<image src="../../../static/shouye/down.png" mode="widthFix" class="down-icon">
									</image>
								</div>
							</picker>
						</div>
					</div>
				</u-form-item>
				<u-form-item prop="time">
					<div class="center f28 w100 mb20">
						<div class="c333">证件号</div>
						<input type="text" placeholder="请输入证件号" placeholder-class="c9b" class="flex1 input-box f28" />
					</div>
				</u-form-item>
				<u-form-item prop="time">
					<div class="center f28 w100 mb20">
						<div class="c333">手机号</div>
						<input type="text" placeholder="请输入手机号" placeholder-class="c9b" class="flex1 input-box f28" />
					</div>
				</u-form-item>
				<u-form-item prop="time">
					<div class="center f28 w100 mb20">
						<div class="c333">备用号</div>
						<input type="text" placeholder="请输入备用手机号" placeholder-class="c9b" class="flex1 input-box f28" />
					</div>
				</u-form-item>
			</div>
			<div class="mt40">
				<u-button type="primary" @click="submit">确定提交</u-button>
			</div>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: ['居民身份证'],
				model1: {
					date: '',
					time: '',
				},
				rules: {
					date: [{
						required: true,
						message: '请选择预约日期',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		methods: {
			submit() {
				this.open('./jieGuo')
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			timeChange(e) {
				this.model1.time = e.detail.value
			},
			dateChange(e) {
				this.model1.date = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	:deep(.u-form-item__body) {
		padding: 0 !important;
	}

	.bfff {
		padding: 40rpx 28rpx;
		box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		.shen2-icon {
			width: 40.74rpx;
			height: 33.33rpx;
		}

		textarea {
			height: 162rpx;
			background: #F1F9FE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 14rpx 20rpx;
		}

		.down-icon {
			width: 33.56rpx;
			height: 30.63rpx;
		}

		.input-box {
			height: 68rpx;
			background: #F1F9FE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 0 20rpx;
		}

		.c333 {
			width: 130rpx;
		}

		.address-icon {
			width: 23.56rpx;
			height: 30.63rpx;
			top: 5rpx;
		}

		.shen1-icon {
			width: 35.45rpx;
			height: 39.77rpx;
		}
	}

	.shenQing {
		padding: 40rpx;
	}
</style>